<template>

    <div class="dashboard-wrapper">
      <!-- 顶部统计卡片 -->
      <div class="stat-row">
        <StatCard label="总访问次数" value="9,120" percent="+20%" />
        <StatCard label="在线访客数" value="182" percent="+10%" />
        <StatCard label="点击量" value="9,520" percent="-12%" :up="false" />
        <StatCard label="新用户" value="156" percent="+30%" />
      </div>
  
      <!-- 图表 & 代办 -->
      <div class="panel-row">
        <div class="panel">
          <h3>访问量</h3>
          <LineChart />
        </div>
        <div class="panel">
          <h3>代办事项</h3>
          <TodoPanel :list="todoList" />
        </div>
      </div>
  
      <!-- 底部统计 -->
      <div class="stat-row bottom">
        <StatCard label="总用户量" value="32k" percent="+5%" />
        <StatCard label="总访问量" value="128k" />
        <StatCard label="日访问量" value="1.2k" />
        <StatCard label="周同比" value="20%" percent="+6%" />
      </div>
    </div>
  </template>
  
  <script setup>
  import StatCard from '@/components/StatCard.vue'
  import LineChart from '@/components/LineChart.vue'
  import TodoPanel from '@/components/TodoPanel.vue'   // ✅ 引入 TodoPanel
  
  const todoList = [
    { name: '待处理', percent: 75, desc: '3 项', color: '#ff9800' },
    { name: '已完成', percent: 100, desc: '12 项', color: '#52c41a' }
  ]
  </script>
  
  <style scoped>
  /* 你的样式完全 OK，无需改动 */
  .dashboard-wrapper {
    padding: 24px;
    background: #f5f7fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }
  .stat-row.bottom {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .panel-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .panel {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  .panel h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #262626;
  }
  </style>